<template>
    <div>
      <!-- 步骤指示器 -->
      <el-steps :active="2" finish-status="success">
        <el-step title="填写基本信息" />
        <el-step title="绑定会员卡" />
        <el-step title="完成" />
      </el-steps>
  
      <!-- 表单 -->
      <el-form label-width="120px" class="demo-ruleForm">
        <el-form-item label="选择会员卡">
          <el-select v-model="selectedCard" placeholder="请选择会员卡">
            <el-option
              v-for="(item, index) in cards"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="充值次数">
          <el-input v-model.number="rechargeTimes" placeholder="请输入充值次数"></el-input>
        </el-form-item>
        
        <el-form-item label="有效期">
          <el-input v-model.number="validityDays" placeholder="请输入有效期(天数)"></el-input>
        </el-form-item>
        
        <el-form-item label="实收金额">
          <el-input v-model.number="actualAmount" placeholder="请输入实收金额"></el-input>
        </el-form-item>
        
        <el-form-item label="选择支付方式">
          <el-select v-model="selectedPaymentMethod" placeholder="请选择支付方式">
            <el-option
              v-for="(item, index) in paymentMethods"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
        
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 会员卡列表
  const cards = [
    { id: 1, name: '普通卡' },
    { id: 2, name: '银卡' },
    { id: 3, name: '金卡' },
  ];
  
  // 支付方式列表
  const paymentMethods = [
    { id: 1, name: '微信支付' },
    { id: 2, name: '支付宝' },
    { id: 3, name: '现金' },
  ];
  
  // 表单数据模型
  const selectedCard = ref('');
  const rechargeTimes = ref(50);
  const validityDays = ref(30);
  const actualAmount = ref(0);
  const selectedPaymentMethod = ref('');
  const form = ref({ note: '' });
  
  // 提交表单
  async function confirm() {
    try {
      await submitFormToBackend();
      navigateToNextStep();
    } catch (error) {
      console.error('会员卡绑定失败:', error);
    }
  }
  
  // 返回上一步
  function goBack() {
    // 假设这里有一个方法来导航到上一步
    console.log('返回上一步');
  }
  </script>
  
  <style scoped>
  .demo-ruleForm .el-form-item__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
  </style>